import React from 'react';
import { Layout, Button, Card } from 'antd';

import BlueprintMenu from './BlueprintMenu';

import CreateIssue from './CreateIssue';
import EditIssue from './EditIssue';

const { Content, Sider } = Layout;

interface BasicLayoutProps {
  data: any;
  onPdfSelect: (url?: string) => void;
  onIssueSelect: (url: string, marks: any[]) => void;
  onPropsChange: (val: any) => void;
  onSaveIssue?: (
    payload: { bhid?: string; opinion?: string; marks?: any },
    callback: (success: boolean) => void,
  ) => void;
}

const ProjectLayout: React.FC<BasicLayoutProps> = (props) => {
  const {
    data,
    children,
    onSaveIssue,
    onPropsChange,
    onPdfSelect,
    onIssueSelect,
    ...restProps
  } = props;
  const {
    activeTabKey,
    collapsed,
    editIssueCollapsed,
    editIssueReadonly,
    editIssueFormValues,
    blueprintList,
    drawingMarks,
    issueListState,
    compareList,
    majorMenuState,
  } = data;
  const { checkedKeys, selectedBph } = issueListState;
  const { selectedKey: selectedBpKey, selectedBp } = majorMenuState;
  const gridStyle: any = {
    width: '50%',
    textAlign: 'center',
    padding: '5px',
  };
  const buttonStyle: any = { width: 88 };

  // 新增审查意见按钮状态
  let newIssue: boolean = false;
  if (activeTabKey === '1') {
    newIssue = selectedBp && selectedBp.id;
  } else if (activeTabKey === '2') {
    newIssue =
      checkedKeys && checkedKeys.length === 1 && selectedBp.version === selectedBph.version;
  } else {
    newIssue = false;
  }

  let bhid = '';
  if (activeTabKey === '1') {
    if (selectedBp) {
      const { historyList = [] } = selectedBp;
      if (historyList.length > 0) {
        bhid = historyList[0].id;
      }
    }
  } else if (activeTabKey === '2') {
    bhid = selectedBph && selectedBph.id;
  }

  return (
    <>
      <Layout>
        <Sider
          theme="light"
          trigger={null}
          defaultCollapsed
          collapsedWidth={0}
          collapsed={!collapsed}
          collapsible
          width={300}
        >
          <BlueprintMenu
            height={window.innerHeight - 427}
            data={blueprintList}
            onBlueprintSelect={onPdfSelect}
            onIssueSelect={onIssueSelect}
            onCollapsed={onPropsChange}
            {...restProps}
          />
          <Card bordered={false} bodyStyle={{ height: 180, overflowY: 'auto' }}>
            <Card.Grid hoverable={false} style={gridStyle}>
              <Button
                type="primary"
                style={buttonStyle}
                disabled={activeTabKey !== '1' || selectedBpKey === ''}
              >
                图纸退回
              </Button>
            </Card.Grid>
            <Card.Grid hoverable={false} style={gridStyle}>
              <Button
                disabled={!newIssue}
                type="primary"
                style={buttonStyle}
                onClick={(e) => {
                  if (e) {
                    e.preventDefault();
                  }
                  onPropsChange({
                    collapsed: false,
                    drawingUrl: activeTabKey === '1' ? selectedBp.url : selectedBph.url,
                    drawingMarks: [],
                    pdfMarkable: true,
                    editIssueCollapsed: true,
                    editIssueReadonly: true,
                    editIssueFormValues: {
                      bhid: '',
                    },
                  });
                }}
              >
                添加意见
              </Button>
            </Card.Grid>
            <Card.Grid hoverable={false} style={gridStyle}>
              <Button type="primary" style={buttonStyle}>
                意见回复
              </Button>
            </Card.Grid>
            <Card.Grid hoverable={false} style={gridStyle}>
              <Button type="primary" style={buttonStyle}>
                待定
              </Button>
            </Card.Grid>
            <Card.Grid hoverable={false} style={gridStyle}>
              <Button
                disabled={!(checkedKeys && checkedKeys.length === 2)}
                type="primary"
                style={buttonStyle}
                onClick={() => {
                  window.open(
                    `${window.location.origin}/project/compare/${compareList[0].id}/vs/${compareList[1].id}`,
                  );
                }}
              >
                图纸比对
              </Button>
            </Card.Grid>
          </Card>
        </Sider>
        <Sider
          trigger={null}
          defaultCollapsed
          collapsedWidth={0}
          collapsed={collapsed}
          collapsible
          theme="light"
          width={300}
        >
          <div style={{ height: window.innerHeight - 247 }}>
            <CreateIssue
              initData={{ bhid }}
              drawingMarks={drawingMarks}
              onSaveIssue={onSaveIssue}
              onPropsChange={onPropsChange}
            />
          </div>
        </Sider>
        <Content style={{ padding: '0 0 0 6px', height: window.innerHeight - 191 }}>
          {children}
        </Content>

        <Sider
          trigger={null}
          defaultCollapsed
          collapsedWidth={0}
          collapsed={editIssueCollapsed}
          collapsible
          theme="light"
          width={350}
        >
          <div style={{ height: window.innerHeight - 247 }}>
            <EditIssue
              readonly={editIssueReadonly}
              initData={editIssueFormValues}
              drawingMarks={drawingMarks}
              onSaveIssue={onSaveIssue}
              onPropsChange={onPropsChange}
            />
          </div>
        </Sider>
      </Layout>
    </>
  );
};

export default ProjectLayout;
